<template>
  <view class="parking-place parking-detail">
    <view class="park-top park-top2" :style="'height:'+headHeight+'px;'">
      <u-navbar :autoBack="true" :bgColor="bgColor">
        <view class="u-nav-slot flex-ac" slot="left">
          <div class="back">
            <u-icon name="arrow-left" size="19"></u-icon>
          </div>
          <view class="search" v-if="false">
            <u-search placeholder="提前找找目的地停车位" v-model="keyword" :showAction="false"
                      :clearabled="false"></u-search>
          </view>
        </view>
      </u-navbar>
    </view>
    <scroll-view :scroll-top="scrollTop" @scroll="scroll" scroll-y="true" class="scroll-Y">
      <view class="park-cont">
        <mapBox class="map" :latitude="latitude" :longitude="longitude" :markers="markers"/>
        <!-- 所有 -->
        <view class="tabcont">
          <view class="laybox laybox2 flex-col flex-c">
            <view class="lay-tit lay-tit2 flex-cc">
              <view class="bar"></view>
            </view>
            <view class="lay-cont">
              <view class="list">
                <block v-for="(item,index) in processedParkList" :key="index">
                  <view class="li" @click="jumpDetail(item)">
                    <view class="item">
                      <!-- <view class="near" v-if="item.isTop">距离最近</view> -->
                      <view class="near" v-if="false">距离最近</view>
                      <view class="row1">{{ item.stationName }}</view>
                      <view class="row2 flex-cb">
                        <view class="left">
                          <view class="dd flex-ac">
                            <view class="icon">
                              <image :src="imageUrl +'parking/icon_park.png'" mode="widthFix">
                              </image>
                            </view>
                            <view class="info flex-ac">
                              <view class="txt1">充电停车场
                                <text
                                    v-if="false">|
                                </text>
                              </view>
                              <view class="tag" :class="item.tcClass" v-if="false">
                                {{ item.tcText }}
                              </view>
                            </view>
                          </view>
                          <view class="dd flex-ac">
                            <view class="icon">
                              <image :src="imageUrl +'parking/icon_map.png'" mode="widthFix">
                              </image>
                            </view>
                            <view class="info ep1">
                              {{ item.address || '未设置地址' }}
                            </view>
                          </view>
                        </view>
                        <view class="right">
                          <view class="go">
                            <image :src="imageUrl +'parking/icon_go.png'" mode="widthFix">
                            </image>
                          </view>
                          <view class="km">{{ item.parkToUserDistance }}km</view>
                        </view>
                      </view>
                      <view class="row3 flex-cb">
                        <view class="zt">
                          <text :class="item.statusClass">{{ item.statusText }}</text>
                        </view>
                        <view class="per flex">
                          <view class="txt1">
                            <text :class="item.statusClass">{{ item.equipmentAvailableNum }}</text>
                          </view>
                          <view class="txt2">/ {{ item.equipmentTotalNum }}</view>
                        </view>
                        <view class="step flex-ac">
                          <view class="jd" :class="item.statusClass" :style="{ width: item.progressWidth }"></view>
                        </view>
                      </view>
                    </view>
                  </view>
                </block>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import {
  getParams
} from '../../api/myHttps';
import mapBox from '@/components/map.vue';

export default {
  components: {
    mapBox
  },
  data() {
    return {
      latitude: 0,
      longitude: 0,
      markers: [],
      headHeight: 0,
      navBarHeight: 0,
      keyword: "",
      scrollTop: 0,
      old: {
        scrollTop: 0
      },
      bgColor: 'transparent',
      parkList: [],
    }
  },
  computed: {
    // 处理停车场数据，添加状态信息和样式类
    processedParkList() {
      return this.parkList.map(item => {
        // 确定包月状态
        const tcStatus = item.tc === 1 ? {
              text: '可包月',
              class: 'tag1'
            } :
            item.tc === 2 ? {
              text: '不可包月',
              class: 'tag2'
            } : {
              text: '',
              class: ''
            };

        // 确定车位状态
        let status, statusClass, progressWidth;
        let step = ((item.equipmentTotalNum - item.equipmentAvailableNum) / item.equipmentTotalNum * 100).toFixed(2);
        if (step < 30) {
          status = '充足';
          statusClass = 's1';
          progressWidth = '50%'; // (24/60)*100 ≈ 40%，但设计是50%以下显示充足
        } else if (step >= 30 && step < 45) {
          status = '一般';
          statusClass = 's2';
          progressWidth = '75%'; // (34/60)*100 ≈ 56%，但设计是30-45%显示一般
        } else {
          status = '紧张';
          statusClass = 's3';
          progressWidth = '90%'; // (54/60)*100 ≈ 90%，但设计是45%以上显示紧张
        }
        progressWidth = (100 - step) + '%';

        let url = "/pages/outlets/detail";

        let iconPath = this.imageUrl + "parking/chongdian" + statusClass + ".png";
        // console.log("打印iconPath：",iconPath);
        let markItem = {
          id: item.id,
          latitude: item.latitude,
          longitude: item.longitude,
          iconPath: iconPath,
          width: 50,
          height: 50
        };

        this.markers.push(markItem);
        return {
          ...item,
          tcText: tcStatus.text,
          tcClass: tcStatus.class,
          statusText: status,
          statusClass: statusClass,
          progressWidth: progressWidth,
          step: step,
          url: url
        };
      });
    }
  },
  onShow() {
    // 获取胶囊按钮位置
    // 获取系统信息（主要是状态栏高度）
    const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
    const systemInfo = uni.getSystemInfoSync();

    // 计算顶部总高度：从屏幕顶部到导航栏底部的距离
    const statusBarHeight = systemInfo.statusBarHeight; // 状态栏高度
    const navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2; // 导航栏高度
    const totalTopHeight = statusBarHeight + navBarHeight; // 顶部总高度（含状态栏+导航栏）

    this.headHeight = totalTopHeight + 20
    this.navBarHeight = menuButtonInfo.height
    this.imageTop = menuButtonInfo.top
    this.right = menuButtonInfo.width + 20

    this.longitude = uni.getStorageSync("userLongitude");
    this.latitude = uni.getStorageSync("userLatitude");
    console.log("打印经纬度：", this.latitude, this.longitude);
    this.getNearParkList();
  },
  methods: {
    scroll: function (e) {
      this.old.scrollTop = e.detail.scrollTop
    },
    jumpDetail(item) {
      uni.navigateTo({
        url: item.url + '?parkItem=' + encodeURIComponent(JSON.stringify(item))
      })
    },
    getNearParkList() {
      let params = {
        ownerId: uni.getStorageSync("ownerId"),
        current: 1,
        size: -1,
        // appId: uni.getStorageSync("appId"),
        userLatitude: this.latitude,
        userLongitude: this.longitude,
        destLatitude: "",
        destLongitude: "",
      };
      getParams('/city-mobile/platform/nearStationList', params).then((res) => {
        this.parkList = res.records;
      })
    },
  }
}
</script>
<style>
page {
  overflow: hidden;
  height: 100vh;
}
</style>
<style lang="scss" scoped>
@import '@/static/css/parking.scss'
</style>
